import React, {useRef, useState} from 'react';
import {useLocation} from 'umi';
import {historyThroughputStat} from '@/services/throughput-stat-api'
import {ProCard, ProFormDateTimeRangePicker, QueryFilter} from "@ant-design/pro-components";
import moment from "moment";
import {Col, Row, Statistic} from "antd";
import {Datum} from "@ant-design/plots/es/interface";
import {Line} from "@ant-design/plots";
import {LineConfig} from "@ant-design/plots/es/components/line";

export type HistoryThroughputStatProps = {
  pipelineId?:number;
}
const HistoryThroughputStat: React.FC<HistoryThroughputStatProps> = (props) => {

  const formRef = useRef();
  const location = useLocation();
  // @ts-ignore
  const pipelineId =  props?.pipelineId || location?.state?.pipelineId || null;

  const [rowThroughStat, setRowThroughStat] = useState<any[]>();
  const [fileThroughStat, setFileThroughStat] = useState<any[]>();
  const [throughputStat, setThroughputStat] = useState<API.HistoryThroughputInfoDTO>();

  const transformValue = (data: API.HistoryThroughputInfoDTO) => {
    if (data){
      setThroughputStat(data);
    }
    // 时段内总数
    const rowThroughputStat = data?.rowThroughput?
      Object.entries(data.rowThroughput)
      ?.map(([k, v]) => {
        const time = moment(Number(k)).format('YYYY-MM-DD HH:mm:ss');
        return [
          {x: time, value: v?.tps, category: 'tps'},
          {x: time, value: v?.size, category: '大小'},
          {x: time, value: v?.quantity, category: '大小均值'},
          {x: time, value: v?.number, category: '数量'},
        ];
      }) : undefined;
    if (rowThroughputStat) {
      setRowThroughStat(rowThroughputStat.flat())
    }

    const fileThroughputStat = data?.fileThroughput?
    Object.entries(data.fileThroughput)
      ?.map(([k, v]) => {
        const time = moment(Number(k)).format('YYYY-MM-DD HH:mm:ss');
        return [
          {x: time, value: v?.tps, category: 'tps'},
          {x: time, value: v?.size, category: '大小'},
          {x: time, value: v?.quantity, category: '大小均值'},
          {x: time, value: v?.number, category: '数量'},
        ];
      })  : undefined;
    if (fileThroughputStat) {
      setFileThroughStat(fileThroughputStat.flat())
    }
  }

  const queryThroughputStat = async (values: any) => {
    let data: API.HistoryThroughputInfoDTO = await historyThroughputStat({pipelineId: pipelineId, ...values});
    transformValue(data);
  }


  const HistoryThroughputStatLine = (data: { data: Datum }) => {
    const config:LineConfig = {
      data: data.data,
      xField: 'x',
      yField: 'value',
      sizeField: 'value',
      shapeField: 'trail',
      legend: {size: false},
      colorField: 'category'
    };
    return <Line {...config} />;
  };

  return (
      <ProCard direction="column" ghost gutter={[0, 16]}>
        <ProCard>
          <QueryFilter formRef={formRef} onFinish={queryThroughputStat} span={12} split onInit={queryThroughputStat}>
            <ProFormDateTimeRangePicker
              name={["startTime","endTime"]}
              fieldProps={{format:'YYYY-MM-DD HH:mm'}}
              transform={values =>  values?{startTime:moment(values[0]).valueOf(),endTime:moment(values[1]).valueOf()} :null}
              width="xs"
              label="时间区间"
            />
          </QueryFilter>
        </ProCard>
        <ProCard tabs={{type: 'line'}} >
          <ProCard.TabPane key="row" tab="ROW">
            <Row>
              <Col md={6} sm={6} xs={6}>
                <Statistic title="总大小" value={throughputStat?.totalRowSize || 0}/>
              </Col>
              <Col md={6} sm={6} xs={6}>
                <Statistic title="总数记录数" value={throughputStat?.totalRowRecord || 0}/>
              </Col>
            </Row>
            <HistoryThroughputStatLine data={rowThroughStat}/>
          </ProCard.TabPane>
          <ProCard.TabPane key="file" tab="FILE" >
            <Row>
              <Col md={6} sm={6} xs={6}>
                <Statistic title="总大小" value={throughputStat?.totalFileSize || 0}/>
              </Col>
              <Col md={6} sm={6} xs={6}>
                <Statistic title="总数记录数" value={throughputStat?.totalFileRecord || 0}/>
              </Col>
            </Row>
            <HistoryThroughputStatLine data={fileThroughStat}/>
          </ProCard.TabPane>
        </ProCard>
      </ProCard>
  );
};

export default HistoryThroughputStat;
